<template>
	<div class="thePage flex-column">
		<div class="pg-title60">实习测评</div>
		<div class="list flex-column overflow-y">
			<div class="item-box" v-for="(item, i) in listData" :key="i">
				<div class="title">{{ item.title }}</div>
				<cube-radio-group v-model="item.result" :options="item.options" :id="i" />
			</div>
			<div class="btn-submit" @click="onSubmit">提交</div>
		</div>
		<dialog-confirm :visible="visiblePopup" btnText="返回" content="提交成功" :onConfirm="handleConfirm"></dialog-confirm>
	</div>
</template>

<script>
import DialogConfirm from '@/components/DialogConfirm.vue';
export default {
	name: 'EvalutionList',
	components: {
		DialogConfirm
	},
	data() {
		return {
			defaultAvatar: require('@/pics/default_avatar.png'),
			listData: [
				{
					title: '老师对我们要求严格，课堂纪律好，及时提醒我们认真听讲提高学习效率 ',
					result: 1,
					options: [{ label: '非常满意', value: 1 }, { label: '满意', value: 2 }, { label: '一般', value: 3 }, { label: '不满意', value: 4 }],
					status: 0
				},
				{
					title: '老师理论讲解思路清楚，分析到位，与实际结合紧密。老师实践指导操作规范，要领提示清楚，指导我们认真耐心，注重我们技能的训练  ',
					result: 1,
					options: [{ label: '非常满意', value: 1 }, { label: '满意', value: 2 }, { label: '一般', value: 3 }, { label: '不满意', value: 4 }],

					status: 0
				},
				{
					title: '老师使用鼓励性语言，积极与我们互动，激发我们表达的愿望，课堂教学互动充分；若有线上教学，能够设计多样的线上互动方式  ',
					result: 1,
					options: [{ label: '非常满意', value: 1 }, { label: '满意', value: 2 }, { label: '一般', value: 3 }, { label: '不满意', value: 4 }],
					status: 0
				},
				{
					title: '老师对我们要求严格，课堂纪律好，及时提醒我们认真听讲提高学习效率 ',
					result: 1,
					options: [{ label: '非常满意', value: 1 }, { label: '满意', value: 2 }, { label: '一般', value: 3 }, { label: '不满意', value: 4 }],
					status: 0
				}
			],
			visiblePopup: false //提交确认弹窗显示
		};
	},

	methods: {
		//点击提交按钮
		onSubmit() {
			this.visiblePopup = true;
		},
		//处理弹框确认按钮回调
		handleConfirm() {
			this.visiblePopup = false;
			this.$router.push({name:"evaluationList"})
		}
	}
};
</script>

<style lang="less" scoped>
.thePage {
	font-size: 14px;
	color: #626262;
	line-height: 16px;	

	.list {		
		.item-box {	
			.title {
				padding: 5px;
				font-size: 14px;
				font-weight: 400;
				color: #010101;
				position: relative;
				&::before {
					content: '*';
					color: red;
					position: absolute;
					left: -5px;
					font-weight: bold;
				}
			}
		}
	}
}

.cube-radio-group {
	&::after,
	&::before,
	::after {
		border: none;
	}
	/deep/.cube-radio {
		height: 26px;
	}
}
.btn-submit{
	margin: 20px auto;
}

</style>
